<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>门店二维码管理</span>
            </div>
        </div>
<!--        <div class="ba_f8 pad_20">-->
<!--            <div class="lh25 msgtext fon_12">-->
<!--                温馨提示：请保证到当前小程序主体已认证并且已完善资料；<br>-->
<!--                1、登录<a href="https://mp.weixin.qq.com/" target="_blank">微信小程序后台</a>,依次找到菜单 开发管理-开发设置，启用并添加“扫普通链接二维码打开小程序” 路径-->
<!--                <span @click="tishiImg(1)" class="subjectcolor2 curs mar_l5">提示</span>;<br>-->
<!--                2、下载校验文件，上传至网站根目录<span @click="tishiImg(2)" class="subjectcolor2 curs mar_l5">提示</span>;<br>-->
<!--                3、设置规则，页面路径：yb_wm/order/other/smjh，具体配置如图<span @click="tishiImg(3)" class="subjectcolor2 curs mar_l5">提示</span>；<br>-->
<!--                4、保存后并发布，稍等几分钟之后刷新本页面，即可生成二维码。<span @click="tishiImg(4)" class="subjectcolor2 curs mar_l5">提示</span>-->
<!--            </div>-->
<!--        </div>-->
      <div class="flex mar_t20">
        <div class="flex-g-1 mar_lr20 t_c card">
          <div class="fon_16 lh16 wei">点单码</div>
          <div class="color_6 mar_t20 fon_14">门店点单二维码，用于用户扫码点单</div>
          <div class="mar_t40">
            <img class="codeimg" :src="goods.url"/>
          </div>
          <div class="flex-center">
            <div class="flex">
              <div>二维码链接：</div>
              <div>
                <el-button type="text" @click="copyText(goods.data)">复制</el-button>
              </div>
            </div>
            <div class="flex mar_l20">
              <div>小程序链接：</div>
              <div>
                <el-button type="text" @click="copyText('yb_wm/index/goods')">复制</el-button>
              </div>
            </div>
          </div>
          <div class="mar_t20">
            <a :href='downloadCode(goods.downUrl)'>
              <el-button type="primary">下载聚合码</el-button>
            </a>
            <el-button @click="wxDdmcode" class="mar_l20">微信小程序码</el-button>
            <el-button  @click="zfbDdmCode">支付宝小程序码</el-button>
          </div>
        </div>
        <div class="flex-g-1 mar_lr20 t_c card">
          <div class="fon_16 lh16 wei">快餐码</div>
          <div class="color_6 mar_t20 fon_14">门店快餐二维码，用于用户扫码下单</div>
          <div class="mar_t40">
            <img class="codeimg" :src="fastOrder.url"/>
          </div>
          <div class="flex-x-center">
            <div class="flex">
              <div>二维码链接：</div>
              <!--                        <div class="mar_lr10">{{fastOrder.data}}</div>-->
              <div>
                <el-button type="text" @click="copyText(fastOrder.data)">复制</el-button>
              </div>
            </div>
            <div class="flex mar_l20">
              <div>小程序链接：</div>
              <div>
                <el-button type="text" @click="copyText('yb_wm/shop/ffmode/goods')">复制</el-button>
              </div>
            </div>
          </div>
          <div class="mar_t20">
            <a :href='downloadCode(fastOrder.downUrl)'>
              <el-button type="primary">下载聚合码</el-button>
            </a>
            <el-button  @click="wxKccode" class="mar_l20">微信小程序码</el-button>
            <el-button  @click="zfbKcCode">支付宝小程序码</el-button>
          </div>
        </div>
        <div class="flex-g-1 mar_lr20 t_c card">
          <div class="fon_16 lh16 wei">当面付</div>
          <div class="color_6 mar_t20 fon_14">门店自己的收银二维码，用于用户扫码付款</div>
          <div class="mar_t40">
            <img class="codeimg" :src="cashier.url"/>
          </div>
          <div class="flex-x-center">
            <div class="flex">
              <div>二维码链接：</div>
              <!--                        <div class="mar_lr10">{{cashier.data}}</div>-->
              <div>
                <el-button type="text" @click="copyText(cashier.data)">复制</el-button>
              </div>
            </div>
            <div class="flex mar_l20">
              <div>小程序链接：</div>
              <div>
                <el-button type="text" @click="copyText('yb_wm/shop/in/dmf')">复制</el-button>
              </div>
            </div>
          </div>
          <div class="mar_t20">
            <a :href='downloadCode(cashier.downUrl)'>
              <el-button type="primary">下载聚合码</el-button>
            </a>
            <el-button  @click="wxDmfcode" class="mar_l20">微信小程序码</el-button>
            <el-button  @click="zfbDmfCode" class="mar_l20">支付宝小程序码</el-button>
          </div>
        </div>
      </div>
<!--        <codeEdit ref="codeEdit" @fetchData="fetchData"></codeEdit>-->
        <el-dialog title="操作提示" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="1300px" class="tishidialog">
            <div class="t_c">
                <div v-show="tishiType=='1'" class="t_l">
                    <img src="../../../assets/img/instore/tishi1.png" class="mar_l20">
                </div>
                <div v-show="tishiType=='2'" class="t_c">
                    <img src="../../../assets/img/instore/tishi2.png" class="mar_l20">
                </div>
                <div v-show="tishiType=='3'" class="t_c">
                    <img src="../../../assets/img/instore/tishi3.jpg" class="mar_l20">
                </div>
                <div v-show="tishiType=='4'" class="t_l">
                    <img src="../../../assets/img/instore/tishi4.png" class="mar_l20">
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="二维码"
            :visible.sync="dialogVisiblecode"
            :close-on-click-modal="false"
            width="40%">
          <div class="t_c">
            <img :src="wxDdmcodeImg" class="wid imgCode" v-if="codeType=='1'"/>
            <img :src="wxKccodeImg" class="wid imgCode" v-if="codeType=='2'"/>
            <img :src="wxDmfcodeImg" class="wid imgCode" v-if="codeType=='3'"/>
            <img :src="zfbDdmcodeImg" class="wid imgCode2" v-if="codeType=='4'"/>
            <img :src="zfbKccodeImg" class="wid imgCode2" v-if="codeType=='5'"/>
            <img :src="zfbDmfcodeImg" class="wid imgCode2" v-if="codeType=='6'"/>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisiblecode = false" size="medium">取 消</el-button>
            <el-button type="primary" @click="dialogVisiblecode = false" size="medium">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>
<script>
    import {codeList,getStoreCode} from "@/api/instore";
    // import codeEdit from "../../../views/instore/components/loadcode";
    import {mapState} from "vuex";
    import {getAlipayCode, getCode} from "@/api/setup";
    export default {
        // components: {codeEdit},
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            this.fetchData();
        },
        data() {
            return {
                activeName:'1',
                fastOrder:'',
                cashier:'',
                dialogTableVisible4:false,
                tishiType:'',
                goods: '',
                wxDdmcodeImg: '',
                zfbDdmcodeImg: '',
                wxKccodeImg: '',
                zfbKccodeImg: '',
                wxDmfcodeImg: '',
                zfbDmfcodeImg: '',
                dialogVisiblecode: false,
                codeType: '',
            }
        },
        methods: {
            copyText(row) {
                let Url2 = row;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                console.log(oInput.value);
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            async fetchData() {
                const {data} = await getStoreCode({storeId:this.storeId});
                this.fastOrder = data.fastOrder
                this.cashier = data.cashier
                this.goods = data.goods
            },
            async wxDdmcode() {
              const {data} = await getCode({ident: 'goods', page: 'yb_wm/index/goods',storeId:this.storeId});
              if (data) {
                this.wxDdmcodeImg = data;
              }
              this.codeType = 1
              this.dialogVisiblecode = true
            },
            async wxKccode() {
              const {data} = await getCode({ident: 'fastOrder', page: 'yb_wm/shop/ffmode/goods',storeId:this.storeId});
              if (data) {
                this.wxKccodeImg = data;
              }
              this.codeType = 2
              this.dialogVisiblecode = true
            },
            async wxDmfcode() {
              const {data} = await getCode({ident: 'dmf', page: 'yb_wm/shop/in/dmf',storeId:this.storeId});
              if (data) {
                this.wxDmfcodeImg = data;
              }
              this.codeType = 3
              this.dialogVisiblecode = true
            },
            zfbDdmCode() {
              getAlipayCode({page: 'yb_wm/index/goods', pageType: 'ali',storeId:this.storeId}).then((res) => {
                if (res.code == 1) {
                  if (res.data.code == 1) {
                    this.zfbDdmcodeImg = `${res.data.data}+.jpg`;
                  }
                  this.codeType = 4
                  this.dialogVisiblecode = true
                }
              });
            },
            zfbKcCode() {
              getAlipayCode({page: 'yb_wm/shop/ffmode/goods', pageType: 'ali',storeId:this.storeId}).then((res) => {
                if (res.code == 1) {
                  if (res.data.code == 1) {
                    this.zfbKccodeImg = `${res.data.data}+.jpg`;
                  }
                  this.codeType = 5
                  this.dialogVisiblecode = true
                }
              });
            },
            zfbDmfCode() {
              getAlipayCode({page: 'yb_wm/shop/in/dmf', pageType: 'ali',storeId:this.storeId}).then((res) => {
                if (res.code == 1) {
                  if (res.data.code == 1) {
                    this.zfbDmfcodeImg = `${res.data.data}+.jpg`;
                  }
                  this.codeType = 6
                  this.dialogVisiblecode = true
                }
              });
            },
            tishiImg(type){
                this.tishiType = type
                this.dialogTableVisible4 = true
            },
            downloadCode(row){
                return row
            },
        }
    }
</script>
<style lang="scss" scoped>
    .codeimg{width: 152px;height: 152px;}
    .card{
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        padding: 37px 0px 67px;
    }
    .imgCode {
      width: 400px;
      height: 400px;
    }
    .imgCode2 {
      width: 400px;
      height: 450px;
    }
</style>

